.myLoading {
  transition: all ease-in-out .5s;

  span {
    display: block;
    background: #ccc;
    width: 7px;
    height: 10%;
    border-radius: 14px;
    margin-right: 5px;
    float: left;
    margin-top: 25%;
    --speed: 2.5s;

    &:last-child {
      margin-right: 0px;
    }

    &:nth-child(1) {
      animation: load var(--speed) 1.4s infinite linear;
    }

    &:nth-child(2) {
      animation: load var(--speed) 1.2s infinite linear;
    }

    &:nth-child(3) {
      animation: load var(--speed) 1s infinite linear;
    }

    &:nth-child(4) {
      animation: load var(--speed) 0.8s infinite linear;
    }

    &:nth-child(5) {
      animation: load var(--speed) 0.6s infinite linear;
    }

    &:nth-child(6) {
      animation: load var(--speed) 0.4s infinite linear;
    }

    &:nth-child(7) {
      animation: load var(--speed) 0.2s infinite linear;
    }

    &:nth-child(8) {
      animation: load var(--speed) 0s infinite linear;
    }

    &:nth-child(9) {
      animation: load var(--speed) 0.2s infinite linear;
    }

    &:nth-child(10) {
      animation: load var(--speed) 0.4s infinite linear;
    }

    &:nth-child(11) {
      animation: load var(--speed) 0.6s infinite linear;
    }

    &:nth-child(12) {
      animation: load var(--speed) 0.8s infinite linear;
    }

    &:nth-child(13) {
      animation: load var(--speed) 1s infinite linear;
    }

    &:nth-child(14) {
      animation: load var(--speed) 1.2s infinite linear;
    }

    &:nth-child(15) {
      animation: load var(--speed) 1.4s infinite linear;
    }
  }

  @keyframes load {
    0% {
      background: #ccc;
      margin-top: 25%;
      height: 10%;
    }

    50% {
      background: #444;
      height: 100%;
      margin-top: 0%;
    }

    100% {
      background: #ccc;
      height: 10%;
      margin-top: 25%;
    }
  }

  .showLoading {
    display: block;
    animation: showLoading ease-in-out 0.5s;
  }

  .hideLoading {
    animation: hideLoading ease-in-out 1s;
  }

  @keyframes showLoading {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes hideLoading {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
}